<template>
    <el-main>

      <!-- 按钮 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="客户姓名">
          <el-input v-model="filters.clientName" placeholder="请输入客户姓名" clearable @keyup.enter="onSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="success" @click="onReset">重置</el-button>
          <el-button style="margin-left: 100px;" type="info" @click="viewOutingRequests">查看外出申请</el-button>
          <el-button type="warning" @click="viewCheckOutRequests">查看退住申请</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData"
                style="width: 100%; margin-top: 25px"
                v-loading="loading"
                @selection-change="handleSelectionChange"

                :row-key="'clientId'"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width = "80"></el-table-column>
        <el-table-column prop="clientName" label="客户姓名"></el-table-column>
        <el-table-column prop="clientGender" label="性别"></el-table-column>
        <el-table-column prop="clientAge" label="年龄" ></el-table-column>
        <el-table-column prop="dateOfBirth" label="出生日期" ></el-table-column>
        <el-table-column prop="clientCardNumber" label="身份证号" width = "200"></el-table-column>
        <el-table-column prop="bloodType" label="血型" ></el-table-column>
        <el-table-column prop="familyMember" label="家属" ></el-table-column>
        <el-table-column prop="clientPhone" label="电话号码" ></el-table-column>
        <el-table-column label="操作" width = "280">
          <template #default="scope">
            <el-button size="default" type="primary" @click="openOutingDialog(scope.row)">申请外出</el-button>
            <el-button size="default" type="success" @click="openCheckOutDialog(scope.row)">申请退住</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container" style="margin-top: 20px; display: flex; justify-content: flex-end;">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[6, 10, 20, 50]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange">
        </el-pagination>
      </div>

      <!-- 申请外出/退住对话框 (健康管家使用) -->
      <OutingRequestDialog ref="outingDialogRef" @success="handleSuccess" />
      <CheckOutRequestDialog ref="checkOutDialogRef" @success="handleSuccess" />

    </el-main>
</template>

<script lang="js" setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getMyManagedClients } from '@/api/apiList/client.js';
import OutingRequestDialog from '@/components/OutingRequestDialog.vue';
import CheckOutRequestDialog from '@/components/CheckOutRequestDialog.vue';

const userRole = ref(localStorage.getItem('role'));
const userId = ref(localStorage.getItem('adminId'));
const numericUserId = userId.value ? parseInt(userId.value, 10) : null;

// --- 状态定义 ---
const router = useRouter();
const loading = ref(false);
const tableData = ref([]);
const filters = reactive({ clientName: '' });
const pagination = reactive({ total: 0, currentPage: 1, pageSize: 6 });


const outingDialogRef = ref(null);
const checkOutDialogRef = ref(null);

const openOutingDialog = (client) => {
  outingDialogRef.value.open(client);
};

const openCheckOutDialog = (client) => {
  checkOutDialogRef.value.open(client);
};

const handleSuccess = () => {
  console.log('申请成功，可以刷新父组件列表');
  fetchData(); // 如果需要，可以重新加载父组件的数据
}

// --- 方法 ---
//获取健康管家负责护理的客户列表
async function fetchData() {
  loading.value = true;
  try {
    const params = {
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize,
      adId: numericUserId, // **重要**：将管家ID作为参数传递
      clientName: filters.clientName
    };
    const pageData = await getMyManagedClients(params);
    tableData.value = pageData.records;
    pagination.total = pageData.total;
  } catch (error) {
    console.error("获取客户列表失败:", error);
  } finally {
    loading.value = false;
  }
}
function handlePageChange(newPage) {
  pagination.currentPage = newPage;
  fetchData();
}

function handleSizeChange(newSize) {
  pagination.pageSize = newSize;
  pagination.currentPage = 1;
  fetchData();
}
const onSearch = () => {
  pagination.currentPage = 1;
  fetchData();
}

const onReset = () => {
  filters.clientName = '';
  onSearch();
}

const viewOutingRequests = () => {
  router.push({ name: 'outingRecord' });
}
const viewCheckOutRequests = () => {
  router.push({ name: 'checkOutRecord' });
}

onMounted(fetchData);
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-form .el-form-item{
  margin-top: 25px;
  margin-bottom: 30px
}
.el-upload__tip{
  line-height: 1;
  color: red;
}

.dialog-section {
  border-bottom: 1px solid #eaeaea;
  padding: 10px 0;
}
.dialog-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
.client-name {
  flex: 1;
}
.client-cover {
  flex: 1;
  text-align: center;
}
.cover-frame {
  display: inline-block;
  border: 1px dashed #ccc;
  padding: 5px;
  width: 150px;
  height: 150px;
}
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}


</style>
